<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>

	<style type="text/css">
		#divQRCode {
			display: inline-block;
			vertical-align: middle;
			border: none 2px blue;
			margin: auto;
		}

		#divLeft {
			margin-left:32px;
			margin-top:16px;
			border: none 2px blue;
			vertical-align: top;
		}


		button {
			cursor: pointer;
		}

		div img {
			vertical-align: middle;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<td>
				<div id="divLeft">
					<p> 图片样式选择</p>
					<select id="selectImageType">
						<optgroup label="图片格式">
							<option value="jpg" selected="selected">jpg</option>
							<option value="png">png</option>
						</optgroup>
					</select>

					<br />

					<p>图片大小设置</p>
					<input type='text' id="inputScale" />
					<br />
					<br/>
					<input id="btnFlush" type="button" value="刷新" />
				</div>
			</td>
			<td>
				<div id="divQRCode">
					<img src="下载.png" id="imgQRCode" />
				</div>
			</td>
		</tr>
	</table>




</body>

</html>

<script type="text/javascript">
	var text = document.getElementById("inputScale");
	text.onkeyup = function () {
		//updateQRCode();		
		this.value = this.value.replace(/\D/g, '');
		if (text.value > 100) {
			text.value = 100;
		}
		if (text.value < 1) {
			text.value = 1;
		}

	}

	function getUrlParam(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) return unescape(r[2]); return null;
	}

	function extractParamFromUrl() {
		var qrcodeServer = getUrlParam("qrcodeServer");
		var callbackServer = getUrlParam("url");
		var scale = getUrlParam("scale");
		var id = getUrlParam("id");
		var action = getUrlParam("action");

		console.log("qrcodeServer = " + qrcodeServer);
		console.log("callbackServer = " + callbackServer);
		console.log("scale = " + scale);
		console.log("id = " + id);
		console.log("action = " + action);

		return {
			qrcodeServer: qrcodeServer,
			callbackServer: callbackServer,
			scale: scale,
			id: id,
			action: action
		};
	}

	var params = extractParamFromUrl();

	initPage(params);

	function initPage(params) {
		//
		var inputScale = document.getElementById("inputScale");
		inputScale.value = params.scale;

		//
		var imgQRCode = document.getElementById("imgQRCode");
		var urlQRCode = makeQRCodeURL(params.qrcodeServer, params.callbackServer, params.scale, params.id, params.action, "jpg");
		imgQRCode.setAttribute('src', urlQRCode);
	}

	function makeQRCodeURL(qrcodeServer, callbackServer, scale, id, action, imageType) {
		var url = qrcodeServer + "url=" + callbackServer + "&action=" + action + "&scale=" + scale + "&id=" + id + "&img=" + imageType;
		return url;
	}

	document.getElementById("btnFlush").addEventListener("click", updateQRCode);
	document.getElementById("inputScale").addEventListener("propertychange", updateQRCode);

	function updateQRCode() {
		//scale
		var scale = document.getElementById("inputScale").value;
		if (scale > 100 || scale < 1) {
			scale = 5;
		}

		//imageType
		var imageType = document.getElementById("selectImageType").value;

		//
		var imgQRCode = document.getElementById("imgQRCode");
		var urlQRCode = makeQRCodeURL(params.qrcodeServer, params.callbackServer, scale, params.id, params.action, imageType);
		imgQRCode.setAttribute('src', urlQRCode);
		console.log("urlQRCode = " + urlQRCode);
	}
</script>